<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../static/js/vue.js"></script>
</head>
<body>


<div id="app">
    <h1>{{msg}}</h1>


    <login></login>
    <xj></xj>
    <login01></login01>





</div>




</body>
</html>
<script>

    const login = {
        template: `<div><h1>用户登录</h1><h1 @click="test">{{aaa}}</h1><login02></login02></div>`,
        data(){
            return {
                count: 2,
            }
        },
        components: {
            login02: {
                template: `<div><h1>子组件测试02</h1></div>`,
            }
        },
        methods: {
            test(){
                this.count++;
            }
        },
        computed: {
            aaa(){
                return this.count * this.count;
            }
        }
    }

    new Vue({
        el: "#app",
        data: {
            msg: "Vue的组件components"
        },
        methods:{

        },
        computed: {

        },
        components:{
            login:login,
            xj: {
                template: `<div><h1>子组件测试01</h1></div>`,
            },
            login01: {
                template: `<div><h1>子组件测试</h1></div>`,
            },

        },
    });

</script>